<template>
  <div class="container">
    <div class="brand">
      <div class="img">
        <img :src="brandInfo.brand_img" alt="" />
      </div>
      <div class="info">
        <div class="brand-name">
          {{ brandInfo.en_name }}/{{ brandInfo.zh_name }}
        </div>
        <div class="brand-item">在售商品{{ brandInfo.brand_number }}件</div>
      </div>
      <!-- <button>分享专柜</button> -->
    </div>
    <item-big-img :goodsLists="goodList"></item-big-img>
    <load-more @loadMore="loadMore"></load-more>
  </div>
</template>

<script>
import { getBrandGoods } from "@/api/mall";
import itemBigImg from "@/components/item-big-img.vue";
import loadMore from "@/components/load-more";
export default {
  data() {
    return {
      brandInfo: {},
      page: 1,
      goodList: [],
      isAll: false,
      loading: false
    };
  },
  methods: {
    loadMore() {
      if (this.loading || this.isAll || this.goodList.length === 0) return;
      this.loading = true;
      this.getBrandGoodList(++this.page);
    },
    getBrandGoodList(page) {
      getBrandGoods({
        id: this.$route.params.id,
        page
      }).then(res => {
        if (res.status === 200) {
          this.brandInfo = res.data.data;
          this.goodList.push(...res.data.data.commodity);
          if (res.data.data.commodity.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    }
  },
  created() {
    this.getBrandGoodList(1);
  },
  components: {
    itemBigImg,
    loadMore
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  overflow: auto;
  padding-bottom: 1rem;
  .brand {
    padding: 0.36rem 3.2%;
    position: relative;
    display: flex;
    margin-bottom: 0.48rem;
    background-color: #fff;

    .img {
      width: 2.28rem;
      height: 2.28rem;
      background-color: #dfdfdf;
      margin-right: 0.6rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .brand-name {
      color: rgba(68, 68, 68, 1);
      font-size: 0.72rem;
      margin-top: 0.3rem;
    }

    .brand-item {
      color: rgba(153, 153, 153, 1);
      font-size: 0.56rem;
      margin-top: 0.3rem;
    }

    button {
      border: 1px solid rgba(153, 153, 153, 1);
      color: #444444;
      font-size: 0.52rem;
      border-radius: 0.12rem;
      background: none;
      position: absolute;
      padding: 0.2rem 0.3rem;
      right: 3.2%;
      top: 0.6rem;
    }
  }
}
</style>
